<template>
  <el-select
    multiple
    collapse-tags
    v-model="value"
    @change="userChange"
    placeholder="Select"
    style="width: 240px"
  >
    <el-option
      v-for="(item, index) in cities"
      :key="item.value"
      :label="item.label"
      :value="item.id"
    >
      <span style="float: left">100{{ index }}-{{ item.label }}</span>
    </el-option>

    <template #footer>
      <div class="footer">
        <el-pagination
          small
          background
          layout="total, ->, prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="pageCurrent"
          @current-change="pageCurrentChange"
        />
      </div>
    </template>
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const data = [
  {
    id: 1,
    value: "Beijing",
    label: "Beijing",
  },
  {
    id: 2,
    value: "Shanghai",
    label: "Shanghai",
  },
  {
    id: 3,
    value: "Nanjing",
    label: "Nanjing",
  },
  {
    id: 4,
    value: "Chengdu",
    label: "Chengdu",
  },
  {
    id: 5,
    value: "Shenzhen",
    label: "Shenzhen",
  },
  {
    id: 6,
    value: "Guangzhou",
    label: "Guangzhou",
  },
];

const value = ref("");
const cities = ref<any>([]);
const total = ref<number>(data.length);
const pageSize = ref<number>(2);
const pageCurrent = ref<number>(1);

const getPage = (val: number, size = 10, data: any) => {
  let cur = val;
  let num = size;
  let count = Math.ceil(data.length / num);
  let total = cur * num > data.length ? data.length : cur * num;
  let arr: any = [];

  if (cur < 1) {
    cur = 1;
  }

  if (cur > count) {
    cur = count;
  }

  for (let i = (cur - 1) * num; i < total; i++) {
    arr.push(data[i]);
  }

  return arr;
};

const pageCurrentChange = (val: number) => {
  pageCurrent.value = val;
  cities.value = getPage(val, pageSize.value, data);
};

pageCurrentChange(pageCurrent.value);

const userChange = (val: number) => {};
</script>
